<template>
  <div class="addPeople">
    <span class="addTitle">新增人员</span>
    <img class="closeImg"
         src="../../../assets/img/close.png"
         @click="closeAdd"
         alt="">
    <el-row class="addCon">
      <el-form label-width="140px"
               ref="addForm"
               :rules="addRules"
               :model="addForm"
               :disabled="$route.query.type ==='look' ?  true :false">
        <el-col :span="10">
          <el-form-item label="姓名"
                        prop="person_name">
            <el-input v-model="addForm.person_name"
                      placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="手机号码"
                        prop="phone">
            <el-input v-model.number="addForm.phone"
                      oninput="if(value.length>11)value=value.slice(0,11)"
                      placeholder="请输入手机号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="员工工号">
            <el-input v-model="addForm.person_no"
                      placeholder="请输入员工工号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="进入浙建集团时间"
                        prop="entry_date">
            <el-date-picker style="width: 100%;"
                            v-model="addForm.entry_date"
                            type="date"
                            value-format='yyyy-MM-dd'
                            placeholder="请选择进入浙建集团时间">
            </el-date-picker>
            <!-- <el-input v-model="addForm.time"
                      placeholder="请输入进入浙建集团时间"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="人员类别">
            <el-select v-model="addForm.person_type"
                       placeholder="请选择人员类别">
              <el-option v-for="option in peopleTypeList"
                         :key="option.value"
                         :value="option.value"
                         :label="option.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="试用终止时间">
            <el-date-picker style="width: 100%;"
                            v-model="addForm.try_end_date"
                            type="date"
                            value-format='yyyy-MM-dd'
                            placeholder="请选择试用终止时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="员工状态"
                        prop="person_status">
            <el-select v-model="addForm.person_status"
                       placeholder="请选择">
              <el-option v-for="option in peopleStatusList"
                         :key="option.value"
                         :value="option.value"
                         :label="option.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="试用期限(月)">
            <el-input v-model="addForm.try_month_num"
                      placeholder="请输入试用期限"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="所属机构(部门)">
            <el-input v-model="addForm.organ_name"
                      placeholder="请输入所属机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="管理层级">
            <el-input v-model="addForm.manage_level"
                      placeholder="请输入管理层级"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="一级机构">
            <el-input v-model="addForm.one_organ"
                      placeholder="请输入一级机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="职务级别">
            <el-input v-model="addForm.job_level"
                      placeholder="请输入职务级别"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="二级机构">
            <el-input v-model="addForm.two_organ"
                      placeholder="请输入二级机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="条线">
            <el-input v-model="addForm.strip_line"
                      placeholder="请输入条线"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="三级机构">
            <el-input v-model="addForm.three_organ"
                      placeholder="请输入三级机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="序列">
            <el-select v-model="addForm.order_type"
                       placeholder="请选择序列">
              <el-option v-for="option in orderList"
                         :key="option.value"
                         :value="option.value"
                         :label="option.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="四级机构">
            <el-input v-model="addForm.four_organ"
                      placeholder="请输入四级机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="岗位名称"
                        prop="job_name">
            <el-input v-model="addForm.job_name"
                      placeholder="请输入岗位名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="五级机构">
            <el-input v-model="addForm.five_organ"
                      placeholder="请输入五级机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="部门编码">
            <el-input v-model="addForm.dept_no"
                      placeholder="请输入部门编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="六级机构">
            <el-input v-model="addForm.six_organ"
                      placeholder="请输入六级机构"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-col :span="24"
              :offset="10"
              v-if="$route.query.type==='add' || $route.query.type==='edit'">
        <el-button type="primary"
                   @click="addPerson('addForm')">确定</el-button>
        <el-button @click="cancelPerson('addForm')">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    var validatorPhone = function (rule, value, callback) {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else if (!/^1\d{10}$/.test(value)) {
        callback(new Error('手机号不能大于11位'))
      } else {
        callback()
      }
    }
    return {
      peopleTypeList: [], //人员类别
      peopleStatusList: [], //员工状态
      orderList: [], //序列
      addForm: {
        node_id: '',
        node_type: '',
        dept_no: '',//部门编码
        comp_id: '',
        person_name: '',
        phone: '',
        person_no: '',
        person_type: '',
        person_status: '',
        organ_name: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        entry_date: '',
        try_end_date: '',
        try_month_num: '',
        manage_level: '',
        job_level: '',
        strip_line: '',
        order_type: '',
        job_name: '',
        dept_no: ''
      },
      addRules: {
        person_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, validator: validatorPhone, trigger: 'blur' }],
        person_status: [{ required: true, message: '请选择员工状态', trigger: 'blur' }],
        entry_date: [{ required: true, message: '请输入时间', trigger: 'blur' }],
        job_name: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
      },
      optionList: [],
    }
  },
  created () {
    this.getPeopleTypeCode()
    this.getPeopleStatusCode()
    this.getOrderCode()

    if (this.$route.query.type === 'edit' || this.$route.query.type === 'look') {
      this.getDetail()
    } else {
      this.getSupOrgList();
    }

    this.addForm.comp_id = JSON.parse(window.localStorage.userInfo).comp_id// 公司id
  },
  mounted () {

  },
  methods: {
    getSupOrgListParams () {
      let nodeId = this.$route.query.node_id || '';
      let nodeType = this.$route.query.node_type || '';
      let objParams = {
        node_id: nodeId,
        node_type: nodeType
      };
      return objParams;
    },
    getSupOrgList () {//六级
      backEvaluateApi.getSupOrgList({
        params: this.getSupOrgListParams()
      }).then((res) => {
        let list = res.data.list || [];
        if (list.length > 0) {
          this.addForm.one_organ = list[0].name || '';
          this.addForm.two_organ = list[1].name || '';
          this.addForm.three_organ = list[2].name || '';
          this.addForm.four_organ = list[3].name || '';
          this.addForm.five_organ = list[4].name || '';
          this.addForm.six_organ = list[5].name || '';
        }
        console.log('测试res=', res)
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取人员类别标准码
    getPeopleTypeCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'platPersonType'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.peopleTypeList = res.data.list
          // window.localStorage.setItem('dataOriginCode', JSON.stringify(this.dataOriginCode))
        }
      })
    },
    // 获取员工状态标准码
    getPeopleStatusCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'platPersonStatus'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.peopleStatusList = res.data.list
          // window.localStorage.setItem('dataOriginCode', JSON.stringify(this.dataOriginCode))
        }
      })
    },
    // 获取序列标准码
    getOrderCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'platOrderType'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.orderList = res.data.list
          // window.localStorage.setItem('dataOriginCode', JSON.stringify(this.dataOriginCode))
        }
      })
    },

    //获取页面详情
    getDetail () {
      backEvaluateApi.checekPeopleList({
        params: {
          person_id: this.$route.query.personId
        }
      }).then((res) => {
        let data = res.data;
        if (data) {
          this.addForm = res.data
        };
        // this.$router.push({ path: '\PeopleWarehouse' })
      }).catch(err => {
        console.log(err);
      })
    },
    //关闭新增页面
    closeAdd () {
      this.$router.push({ path: '\PeopleWarehouse' })
    },
    //确定
    addPerson (addForm) {
      let typeV = this.$route.query.type === 'add';
      let param = typeV ? this.addForm : { person_id: this.$route.query.personId, ...this.addForm }
      let nodeId = this.$route.query.node_id;
      let nodeType = this.$route.query.node_type;
      let organNameId = this.addForm.organ_name_id || '';
      if (typeV) {
        this.$set(param, 'node_id', nodeId);//节点主键值
        this.$set(param, 'node_type', nodeType);//节点名称
      } else {
        this.$set(param, 'node_id', organNameId);
        this.$set(param, 'node_type', '2');
      }
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          backEvaluateApi.savePerson({
            data: param
          }).then((res) => {
            if (res.code === 0) {
              if (this.$route.query.type === 'add') {
                this.$message.success('新增成功')
              } else {
                this.$message.success('修改成功')
              }
              this.$router.push({ path: '\PeopleWarehouse' })
            }
          }).catch(err => {
            console.log(err);
          })
        }
      })
    },
    //取消
    cancelPerson (addForm) {
      this.$refs[addForm].resetFields();
      this.$router.push({ path: '\PeopleWarehouse' })
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.addPeople {
  padding: 20px;
  .addTitle {
    font-size: 15px;
  }
  .closeImg {
    width: 12px;
    float: right;
    cursor: pointer;
  }
  .addCon {
    margin-top: 20px;
  }
  .el-select {
    display: block;
  }
}
</style>
